<!DOCTYPE html>
<html>
<head>
    <title>文章编辑</title>
    <#include "/header.html">
    <script src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.0.0.min.js"></script>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>

        <!-- 引入相关js文件 -->
        <script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/third-party/jquery-3.3.1.min.js"></script>
        <script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/ueditor.all.min.js"> </script>
        <script type="text/javascript" charset="utf-8" src="${request.contextPath}/statics/plugins/edit135/a92d301d77.js"> </script>
        <!-- 引入相关css文件 -->
        <link rel="stylesheet" type="text/css" href="${request.contextPath}/statics/plugins/edit135/themes/96619a5672.css" />
</head>
<body>
<style>
    .layui-layer-prompt .layui-layer-input {
        width: 400px;
    }
</style>
<div  class="panel panel-default" id="rrapp" v-cloak>
    <div class="panel-heading" >文章标题：{{bArticleInfo.articleTitle}}</div>
    <form class="form-horizontal">

<!--        <div class="form-group">-->
<!--            <div class="col-sm-2 control-label" style="color: red;">品牌</div>-->
<!--            <div class="col-sm-10">-->
<!--                <input class="form-control" list="editBrandNames" placeholder="品牌" id="brandName">-->
<!--                <datalist id="editBrandNames" style="line-height: 10px">-->

<!--                </datalist>-->
<!--            </div>-->
<!--        </div>-->
        <div class="form-group" style="display: none">
            <div class="col-sm-2 control-label" style="color: red;">品牌</div>
            <div class="col-sm-10">
                <div id="selectBrandNameList">

                </div>
                <input class="form-control" list="allBrandNames" placeholder="品牌" id="selectBrandName">
                <datalist id="allBrandNames" style="line-height: 10px">

                </datalist>
                <input type="button" onclick="addBrandName()" value="添加"/>
            </div>
        </div>
        <script>
            function genID(){
                return Math.floor(Math.random()*(999999-100000))+100000;
            }

            /*add品牌*/
            function addBrandName() {
                var selectBrandName=$("#selectBrandName").val();

                if(selectBrandName.trim()==''){
                    alert('请选择品牌');
                    return false;
                }

                var len=$(".pArticleTypeName").length;
                if(len==5){
                    alert('最多可以添加5个品牌');
                    return false;
                }

                if($(".pArticleTypeName[value='"+selectBrandName+"']").length>0){
                    alert('品牌已存在');
                    return false;
                }

                var index=genID(6);//获取6位随机ID
                $("#selectBrandNameList").append(
                    "<p class='pArticleTypeName' id='pBrandName"+index+"' value='"+selectBrandName+"'>"+selectBrandName+"&nbsp;<a href='javascript:void(0);' onclick='delBrand("+index+")'>删除</a></p>");
                $("#selectBrandName").val("");
            }

            function delBrand(pId) {
                $("#pBrandName"+pId).remove();
            }
        </script>

        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">分类</div>
            <div class="col-sm-10">
                <div id="selectTypeNameList">

                </div>
                <input class="form-control" list="editTypeNames" placeholder="分类" id="articleTypeName">
                <datalist id="editTypeNames" style="line-height: 10px">

                </datalist>
                <input type="button" onclick="addTypeName()" value="添加"/>
                <!--<select id="articleBrandId" class="form-control input-sm" >-->
                <!--<option value='0'>请选择品牌</option>-->
                <!--</select>-->
            </div>
        </div>
        <script>
            /*add品牌*/
            function addTypeName() {
                var selectTypeName=$("#articleTypeName").val();

                if(selectTypeName.trim()==''){
                    alert('请选择分类');
                    return false;
                }

                if($(".pArticleTypeName2[value='"+selectTypeName+"']").length>0){
                    alert('分类已存在');
                    return false;
                }

                var index=genID(6);//获取6位随机ID
                $("#selectTypeNameList").append(
                    "<p class='pArticleTypeName2' id='pTypeName"+index+"' value='"+selectTypeName+"'>"+selectTypeName+"&nbsp;<a href='javascript:void(0);' onclick='delType("+index+")'>删除</a></p>");
                $("#articleTypeName").val("");
            }

            function delType(pId) {
                $("#pTypeName"+pId).remove();
            }
        </script>

        <div class="form-group">
            <div class="col-sm-2 control-label">文章标题</div>
            <div class="col-sm-10">
                <input type="text" class="form-control" v-model="bArticleInfo.articleTitle" id="articleTitle" name="articleTitle" placeholder="文章标题"/>
            </div>
            <!--<input style="position: absolute;" onclick="insertAtCursor(document.getElementById('articleTitle'), '#BN#')" type="button"
                   value="添加品牌占位符" class="btn btn-primary">-->
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label">分享配文</div>
            <div class="col-sm-10">
              <!--  <input type="text" class="form-control" v-model="bArticleInfo.articleDesc" id="articleDesc" name="articleDesc" placeholder="分享配文"/>-->
                <textarea cols="25" rows="10" class="form-control" v-model="bArticleInfo.articleDesc" id="aidChildBirthDiagnosisOther"></textarea>
            </div>
            <!--<input style="position: absolute;" onclick="insertAtCursor(document.getElementById('aidChildBirthDiagnosisOther'), '#BN#')"
                   type="button" value="添加品牌占位符" class="btn btn-primary">-->
        </div>
        <script>
            function insertAtCursor(myField, myValue) {
                //IE 浏览器
                if (document.selection) {
                    myField.focus();
                    sel = document.selection.createRange();
                    sel.text = myValue;
                    sel.select();
                }

                //FireFox、Chrome等
                else if (myField.selectionStart || myField.selectionStart == '0') {
                    var startPos = myField.selectionStart;
                    var endPos = myField.selectionEnd;

                    // 保存滚动条
                    var restoreTop = myField.scrollTop;
                    myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);

                    if (restoreTop > 0) {
                        myField.scrollTop = restoreTop;
                    }

                    myField.focus();
                    myField.selectionStart = startPos + myValue.length;
                    myField.selectionEnd = startPos + myValue.length;
                } else {
                    myField.value += myValue;
                    myField.focus();
                }
            }
        </script>

        <div class="form-group">
            <div class="col-sm-2 control-label">封面图片</div>
            <div class="col-sm-10">
                <img id="articleImgUrl" width="100px" height="100px" />
                <!--<img width="200px" height="200px" id="img"/>-->
                <input type="file"  class="form-control" id='uploadImg' onchange="inserttx(this)"/>
            </div>
        </div>

        <#if shiro.hasPermission("sys:buserinfo:givevip")>
        <div class="form-group">
            <div class="col-sm-2 control-label">经典文章</div>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input checked type="radio" name="articleLevel" value="1" v-model="bArticleInfo.articleLevel"  /> 否
                </label>
                <label class="radio-inline">
                    <input type="radio" name="articleLevel" value="0" v-model="bArticleInfo.articleLevel" /> 是
                </label>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label">经典标题</div>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input checked type="radio" name="htTemplateId" value="1" v-model="bArticleInfo.htTemplateId"  /> 否
                </label>
                <label class="radio-inline">
                    <input type="radio" name="htTemplateId" value="0" v-model="bArticleInfo.htTemplateId" /> 是
                </label>
            </div>
        </div>

    </#if>
    <div class="form-group">
        <div class="col-sm-2 control-label">显示类型</div>
        <div class="col-sm-10">
            <label class="radio-inline">
                <input checked type="radio" name="articleVersionNum" value="2" v-model="bArticleInfo.articleVersionNum"  /> 常规
            </label>
            <label class="radio-inline">
                <input type="radio" name="articleVersionNum" value="0" v-model="bArticleInfo.articleVersionNum" /> 大图
            </label>
        </div>
    </div>


        <div class="form-group">
            <div class="col-sm-2 control-label">热度类型</div>
            <div class="col-sm-10">
                <label class="radio-inline">
                    <input type="radio" name="hotType" value="0" v-model="bArticleInfo.hotType"  /> 随机
                </label>
                <label class="radio-inline">
                    <input type="radio" name="hotType" value="1" v-model="bArticleInfo.hotType" /> 自定义
                </label>
                <input type="text" class="form-control" v-model="bArticleInfo.articleHotScore" id="articleHotScore" name="articleHotScore" placeholder="热度值"/>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">公众号平台</div>
            <div class="col-sm-10">
                <select style="height: 34px;" id="selectUserGzhList" v-model="bArticleInfo.gzhCode">

                </select>
            </div>
        </div>

        <script type="text/javascript">
            function copyUrl2() {
                var Url2 = document.getElementById("biao1").innerText;
                var oInput = document.createElement('input');
                oInput.value = Url2;
                document.body.appendChild(oInput);
                oInput.select(); // 选择对象
                document.execCommand("Copy"); // 执行浏览器复制命令
                oInput.className = 'oInput';
                oInput.style.display = 'none';
                alert('复制成功');
            }
        </script>
        <div cols="20" id="biao1" style="display: none">#BRAND_CONTENT_TEMPLATE#</div>
        <!--<input onclick="copyUrl2()" type="button" value="点击复制品牌内容模板占位符" class="btn btn-primary">-->
        <input @click="openGetWeiXinPage" type="button" value="抓取微信文章" class="btn btn-primary">

        <!-- 上传音频 -->
        <input type="button" class="btn btn-primary" value="上传音频" onclick="triggerUploadMusic()" />
        <!--<input type="file" accept="audio/*" id="uploadMusic" style="display: none" onchange="insertMusic(this)" />-->
        <input type="file" accept="audio/*" id="uploadMusic" style="display: none" onchange="uploadAudio(this)" />
        <input type="text" id="musicPath" width="200px" style="width: 100%; margin-top: 10px;" placeholder="音频文件链接" readonly />
        <p id="infoDesc" style="color: red; font-size: 14px;display: none">音频文件的链接已复制到粘贴板</p>

        <div class="form-group">
            <script id="editor" type="text/plain" style="width:1024px;"></script>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label" style="color: red;">头条标题</div>
            <div class="col-sm-10">
                <div id="headlineTitle">

                </div>

            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-2 control-label"></div>
            <input type="button" class="btn btn-primary" @click="saveInfo" value="保存"/>
            <input type="button" class="btn btn-warning" @click="closeInfo" value="关闭"/>
        </div>
    </form>
</div>
<script>
        var appkey = '5e0d699a-3170-4210-b676-6dbbac10c65d';
        window.BASEURL = 'http://www.135editor.com';
        window.UEDITOR_HOME_URL = "/ueditor/jsp/upload/image/";
        window.current_editor = UE.getEditor('editor',{
            plat_host:'www.135editor.com',
            appkey:appkey,open_editor:true,pageLoad:true,
            style_url : BASEURL+'/editor_styles/open?inajax=1&appkey=' + appkey,
            style_width:340,
            uploadFormData:{'referer': window.document.referrer},

            initialFrameHeight:680,
            zIndex : 1000,
            focus:true,
            autoFloatEnabled:false,autoHeightEnabled:false,scaleEnabled:false,
            focusInEnd:true
        });

        //编辑器加载完成之后
        window.current_editor.addListener( 'ready', function( editor ) {
            var url = location.search;
            var articleId = url.split("=")[1];
            if(articleId!=0){
                loadData(articleId);
            }
        } );
        $(function () {
            $.ajax({
                type: "POST",
                async:false,
                url: baseURL + 'sys/buserinfo/getUserGzhList',
                contentType: "application/json",
                success: function(r){
                    if(r.code==0){
                        //vm.bbrandinfo=r.brandInfo;
                        $("#selectUserGzhList").append(
                            "<option selected='selected' value='-1'>全部平台</option>");
                        for(var i=0;i<r.userGzhList.length;i++){
                            $("#selectUserGzhList").append(
                                "<option value=" + r.userGzhList[i].gzhCode +">"+ r.userGzhList[i].gzhName+"</option>");
                        }
                    }
                }
            });

            $.ajax({
                type: "POST",
                async:false,
                url: baseURL + 'sys/bbrandinfo/queryAll',
                contentType: "application/json",
                success: function(r){
                    if(r.code==0){
                        vm.bbrandinfo=r.brandInfo;
//                        for(i=0;i<r.brandInfo.length;i++){
//                            $("#articleBrandId").append(
//                                "<option value='" + r.brandInfo[i].id + "'>"+ r.brandInfo[i].brandName +"</option>");
//                        }
                        for(var i=0;i<r.brandInfo.length;i++){
                            $("#allBrandNames").append(
                                "<option value=" + r.brandInfo[i].brandName +">"+"</option>");
                        }
                    }
                }
            });
            $.ajax({
                type: "POST",
                async:false,
                url: baseURL + 'sys/barticletypeinfo/HeadlineTitle',
                contentType: "application/json",
                success: function(r){

                    if(r.code==0){
                        for(var i=0;i<r.titles.length;i++){
                           $("#headlineTitle").append(
                          " <input type='checkbox' id='html"+i+"' value='"+r.titles[i].id+"' name='a' onclick='checkboxOnclick()'/>"+
                            " <label for='html"+i+"'>"+r.titles[i].gzhName+":"+r.titles[i].headlineName+"</label><br/>"
                           )
                        }
                    }
                }
            });

            $.ajax({
                type: "POST",
                async:false,
                url: baseURL + 'sys/barticletypeinfo/queryAll',
                contentType: "application/json",
                success: function(r){
                    if(r.code==0){
                        //vm.bbrandinfo=r.brandInfo;
                        for(var i=0;i<r.barticletypeinfo.length;i++){
                            $("#editTypeNames").append(
                                "<option value=" + r.barticletypeinfo[i].articleTypeName +">"+"</option>");
                        }
                    }
                }
            });

        })
        function checkboxOnclick(){
            text = $("input:checkbox[name='a']:checked").map(function(index,elem) {
                return $(elem).val();
            }).get().join(',');
           // alert("选中的checkbox的值为："+text);
            vm.bArticleInfo.headlineTitleIds = text
        }

        function loadData(e) {
            console.log("e:"+e);
            $.get(baseURL + "sys/barticleinfo/info/"+e, function(r){
                vm.bArticleInfo=r.bArticleInfo;
                if (null != r.bArticleInfo.headlineTitleIds){
                    $(r.bArticleInfo.headlineTitleIds.split(",")).each(function (i,dom){
                        $(":checkbox[value='"+dom+"']").prop("checked",true);
                    });
                }
                $("#articleImgUrl").attr("src",vm.bArticleInfo.articleImgUrl);
                //$("#articleBrandId").find("option[value='"+r.bArticleInfo.articleBrandId+"']").attr("selected",true);
                //console.log( "r.bArticleInfo.articleBrandId:"+r.bArticleInfo.articleBrandId);
                $("#brandName").val(vm.bArticleInfo.brandName);
                $("#articleTypeName").val(vm.bArticleInfo.articleTypeName);
                var a=r.bArticleInfo.articleContent;
                //console.log("Content Load:"+a);
                window.current_editor.setContent(a);

            })
        }

        function triggerUploadMusic() {
            $("#uploadMusic").click();
        }

        function upload(file, pathname = 'ps') {
            console.log(file);
            const client = new window.OSS({
                region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
                accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
                accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
                bucket: 'zktuistatic'
            });
            var date = new Date();
            var yeaer = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            var datePath =yeaer+""+month+""+day;
            var key = "";
            key=pathname+"/"+datePath+"/image"+String(parseInt(Math.random() * 10000000, 10)+getFileExtendingName(file.name));
            client.put(key, file).then(function () {
                return client.get(key);
            }).then(function(ret) {
                console.log(ret.res.requestUrls[0]);
                vm.bArticleInfo.articleImgUrl=ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/","http://zktfile.wxslzf.com/");
                $("#articleImgUrl").attr("src",vm.bArticleInfo.articleImgUrl);

            }).catch(function(err) {
                console.log(err);
            });
        }
        function inserttx(e) {
            var files = e.files;
            var length = files.length;
            console.log("选择了" + length + "张图片");
//            for (var i = 0; i < length; i++) {
//                var fr = new FileReader();
//                fr.onload = function (e) {
//                    console.log("回显了图片");
//                    console.log(this.result);
//                }
//                fr.readAsDataURL(files[i]); //读取文件
//            }
            upload(files[0]);
        }

        function uploadMusic(file, pathname = 'ps') {
            console.log(file);
            const client = new window.OSS({
                region: 'oss-cn-shenzhen', // hangzhou, shanghai, shenzhen
                accessKeyId: 'LTAI4Fh7PnYLw3uQvoUYiazS',
                accessKeySecret: 'cEw7e8QMz0h4XY4qmzCoTzhHITqyUU',
                bucket: 'zktuistatic'
            });
            var date = new Date();
            var yeaer = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            if (month < 10) {
                month = "0" + month;
            }
            if (day < 10) {
                day = "0" + day;
            }
            var datePath =yeaer+""+month+""+day;
            var key = "";
            key=pathname+"/"+datePath+"/music"+String(parseInt(Math.random() * 10000000, 10)+getFileExtendingName(file.name));
            client.put(key, file).then(function () {
                return client.get(key);
            }).then(function(ret) {
                console.log(ret.res.requestUrls[0]);
                let url = ret.res.requestUrls[0].replace("http://zktuistatic.oss-cn-shenzhen.aliyuncs.com/","http://zktfile.wxslzf.com/");
                $("#musicPath").val(url);
                // 复制到剪切板
                $("#musicPath").focus();

                let input = document.getElementById("musicPath");
                if(input.setSelectionRange)
                    input.setSelectionRange(0, input.value.length);//获取光标起始位置到结束位置
                else
                    input.select();
                try {
                    document.execCommand("copy");//执行复制
                } catch(eo) {

                }
                $("#infoDesc").css("display", "block");
                $("#musicPath").css("display", "none");

                setTimeout(function () {
                    $("#infoDesc").css("display", "none");
                    $("#musicPath").css("display", "block");
                }, 2000);
            }).catch(function(err) {
                console.log(err);
            });
        }

        function insertMusic(e) {
            var files = e.files;
            var length = files.length;
            console.log("选择了" + length + "张图片");
//            for (var i = 0; i < length; i++) {
//                var fr = new FileReader();
//                fr.onload = function (e) {
//                    console.log("回显了图片");
//                    console.log(this.result);
//                }
//                fr.readAsDataURL(files[i]); //读取文件
//            }
            uploadMusic(files[0]);
        }

        function uploadAudio(e) {
            var files = e.files;
            var form = new FormData();
            form.append("file", files[0]);

            $.ajax({
                type: "POST",
                url: baseURL + "upload/audio",
                data: form,
                processData: false,
                contentType: false,
                success: function (r) {
                    if (r.code === 0) {
                        console.log("[articleAudioUrl] = " + r.articleAudioUrl);
                        let url = r.articleAudioUrl;

                        $("#musicPath").val(url);
                        // 复制到剪切板
                        $("#musicPath").focus();

                        let input = document.getElementById("musicPath");
                        if(input.setSelectionRange)
                            input.setSelectionRange(0, input.value.length);//获取光标起始位置到结束位置
                        else
                            input.select();
                        try {
                            document.execCommand("copy");//执行复制
                        } catch(eo) {

                        }
                        $("#infoDesc").css("display", "block");
                        $("#musicPath").css("display", "none");

                        setTimeout(function () {
                            $("#infoDesc").css("display", "none");
                            $("#musicPath").css("display", "block");
                        }, 2000);
                    } else {
                        alert(r.msg);
                    }
                }
            });
        }

        function getFileExtendingName (filename) {
            // 文件扩展名匹配正则
            var reg = /\.[^\.]+$/;
            var matches = reg.exec(filename);
            if (matches) {
                return matches[0];
            }
            return '';
        }

            function test(){
                var url = location.search;
                var articleId = url.split("=")[1];
                loadData(articleId);
            }
</script>
<script src="${request.contextPath}/statics/js/modules/sys/barticleinfo.js?_${.now?long}"></script>
<script>
    $("input[name='articleLevel'][value='1']").prop("checked", "checked");
    $("input[name='htTemplateId'][value='1']").prop("checked", "checked");
    $("input[name='articleVersionNum'][value='2']").prop("checked", "checked");
    $("input[name='hotType'][value='0']").prop("checked", "checked");
</script>
</body>
</html>
